<template>
    <div class="box">
        <div class="f-p-wrapper">
            <div class="f-p-box">
                <input type="text" placeholder="请输入注册的账号/手机号" maxlength='30' @blur="checkVal" @keyup="checkVal">
                <span class="tips"></span>
            </div>
            <div class="f-p-box">
                <input type="password" placeholder="请输入密码" maxlength='30' @blur="checkPassword" @keyup="checkPassword">
                <span class="tips"></span>
                <span class="default" @touchstart="showPassword"></span>

            </div>
            <div class="f-p-box">
                <input type="password" placeholder="请重复确认密码" maxlength='30' @blur="confirmPassword" @keyup="confirmPassword">
                <span class="tips"></span>
                <span class="default" @touchstart="showPassword"></span>
            </div>
            <div class="f-p-box">
                <input type="text" placeholder="请输入验证码" maxlength='6' @blur="checkCode" @keyup="checkCode">
                <span class="tips"></span>
                <span class="code" @touchstart="getCode">获取验证码</span>
            </div>
            <div class="f-p-box">
                <div class="btn active" ref='btn' @click='getUserInfo'>
                    {{btnText}}
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    props: {
        btnText: {
            type: String,
            default: '确认',
        },
    },
    data() {
        return {
            titleText: '找回密码',
            userName: '',
            userpassWord: '',
            confirmpassWord: '',
            code: '',
            cansend: false,
            isPhone: false,
        };
    },
    methods: {
        //  检查
        checkVal(e) {
            let usernameBox = e.target;
            this.userName = usernameBox.value;
            this.isNull(usernameBox, '用户名不能为空!');
            this.isPhone = this._isPhoneNo(this.userName);
            console.log(this.isPhone);
            if (!this.isPhone) {
                usernameBox.parentNode.children[1].className = 'tips active';
                usernameBox.parentNode.children[1].innerHTML = '用户名必须为手机号';
            } else {
                usernameBox.parentNode.children[1].className = 'tips';
            }
            this.canSendMessage();
        },
        checkPassword(e) {
            let userPassWord = e.target;
            this.userpassWord = userPassWord.value;
            this.isNull(userPassWord, '密码不能为空!');
            this.canSendMessage();
        },
        checkCode(e) {
            let code = e.target;
            this.code = code.value;
            this.isNull(code, '验证码不能为空!');
            this.canSendMessage();
        },
        getUserInfo() {
            console.log(this.cansend);
            if (this.cansend) {
                let userInfo = {
                    username: this.userName,
                    password: this.userpassWord,
                    password1: this.confirmpassWord,
                    code: this.code,

                };
                this.$emit('getUserInfo', userInfo);
            }
        },
        confirmPassword(e) {
            let confirmPassWord = e.target;
            this.confirmpassWord = confirmPassWord.value;
            this.isNull(confirmPassWord, '密码不能为空!');
            if (this.userpassWord !== '' && this.userpassWord !== null && this.confirmpassWord !== '' && this.confirmpassWord !== null) {
                if (this.userpassWord !== this.confirmpassWord) {
                    confirmPassWord.parentNode.children[1].className = 'tips active';
                    confirmPassWord.parentNode.children[1].innerHTML = '两次输入密码不一致';
                } else {
                    confirmPassWord.parentNode.children[1].className = 'tips';
                }
            }
            this.canSendMessage();
        },
        canSendMessage() {
            if (this.userName.length > 0 && this.userpassWord.length > 0 && this.code.length > 0 && this.userpassWord === this.confirmpassWord && this.isPhone) {
                this.$refs.btn.className = 'btn';
                this.cansend = true;
            } else {
                this.$refs.btn.className = 'btn active';
                this.cansend = false;
            }
        },
        isNull(dom, val) {
            if (dom.value === '' || dom === null) {
                dom.parentNode.children[1].className = 'tips active';
                dom.parentNode.children[1].innerHTML = val;
            } else {
                dom.parentNode.children[1].className = 'tips';
            }
        },
        //  改变密码显示方式
        showPassword(e) {
            let passwordInput = e.target.parentNode.children[0];
            let textType = passwordInput.type;
            if (textType === 'text') {
                passwordInput.type = 'password';
                e.target.className = 'default';
            }
            if (textType === 'password') {
                passwordInput.type = 'text';
                e.target.className = 'default active';
            }
        },
        getCode(e) {
            if (this.isPhone) {
                this.$emit('getCode', { mobile: this.userName });
                let time = 60;
                e.target.innerHTML = `重新发送(${time})`;
                e.target.className = 'code active';
                let t = setInterval(() => {
                    time = time - 1;
                    e.target.innerHTML = `重新发送(${time})`;
                    if (time === 0) {
                        clearInterval(t);
                        e.target.className = 'code';
                        e.target.innerHTML = '重新发送';
                    }
                }, 1000);
            }
        },
        _isPhoneNo(poneInput) {
            let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(poneInput)) {
                return false;
            } else {
                return true;
            }
        },
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.box {
    width: 100%;
    height: 100%;

    .f-p-wrapper {
        width: 100%;
        height: 100%;
        padding: 0 15px;
        box-sizing: border-box;

        .f-p-box {
            width: 100%;
            height: 60px;
            background: #ffffff;
            margin-top: 20px;
            position: relative;

            input {
                outline: none;
                width: 100%;
                height: 100%;
                color: #777777;
                text-indent: 20px;
                font-size: $font-size-large;
                font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
            }

            .default {
                position: absolute;
                right: 25px;
                top: 50%;
                transform: translate3d(0, -50%, 0);
                width: 19px;
                height: 14px;
                bg-image('../../../common/image/y-e-n');
                background-size: 100% 100%;

                &.active {
                    bg-image('../../../common/image/y-e');
                }
            }

            .code {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 130px;
                background: #00b5bf;
                border-radius: 5px;
                line-height: 60px;
                text-align: center;
                font-size: $font-size-large;
                color: #fefefe;

                &.active {
                    background: #cccccc;
                }
            }

            .btn {
                width: 100%;
                height: 100%;
                line-height: 60px;
                font-size: $font-size-large;
                text-align: center;
                background: #ffc400;
                font-size: $font-size-large;
                color: #fefefe;
                border-radius: 5px;

                &.active {
                    background: #cccccc;
                }
            }

            .tips {
                font-size: 12px;
                color: red;
                display: none;

                &.active {
                    display: block;
                }
            }
        }
    }
}
</style>
